const ButtonRow = {
    template: `
    <div>
        <button @click="onButtonClick" 
            name="button-hoodie" value="fullstack-hoddie" class="ui button">Hoddie</button>
        <button @click="onButtonClick" 
            name="button-tee" value="fullstack-tee" class="ui button">Tee</button>
        <button @click="onButtonClick" 
            name="button-fitted-cap" value="fullstack-fatted-cap" class="ui button">Fitted Cap</button>
        <button @click="onButtonClick" 
            name="button-jacket" value="fullstack-jacket" class="ui button">Jacket</button>
    </div>
    `,
    methods: {
        onButtonClick(evt) {
            const button = evt.target;
            console.log(`The user clicked ${button.name}:${button.value}`);
        }
    }
};

new Vue({
    el: '#app',
    components: {
        'button-row': ButtonRow
    }
})
